<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" href="<%=basePath%>css/common_new.min.css">
<link rel="stylesheet"
	href="<%=basePath%>/static/css/owl.carousel.min.css">
<script src="<%=basePath%>static/js/jquery.min.js"></script>
<link rel="stylesheet"
	href="<%=basePath%>static/layer/2.4/skin/layer.css">
<script type="text/javascript"
	src="<%=basePath%>static/layer/2.4/layer.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/xiangqing.css">
<script src="<%=basePath%>static/js/owl.carousel.js"></script>
<script src="<%=basePath%>js/xiangqing.js"></script>

<!-- 顶部登录 -->
<script rel="script" src="<%=basePath%>js/vue.min.js"></script>
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_699355_5fafq7zsd2fq1tt9.css">
<link rel="stylesheet" href="<%=basePath%>css/index.css">
<link rel="stylesheet" href="<%=basePath%>static/css/computer.css">

</head>

			<style type="text/css">
			.qwer{
			  height: 100px;
			  width: 1200px;
			  margin-top: 100px; 
			 }
			 
			 .qwer a{
			 	height: 40px;
			 	width: 60px;
			 	text-align: center;
			 	line-height: 40px;
			 	font-size: 14px;
			 	color: black;
			 	float: left;
			 	margin-left: 10px;
 			}
			</style>

<body style="overflow-x: hidden;">
	<!-- 顶部导航栏 -->
	<section>
	<div id="header">
	<!-- 顶部登录 -->
	<jsp:include page="yeah-top.jsp" />
	<!-- 顶部购物车 -->
	<jsp:include page="yeah_sellitem_shoppingtrolley.jsp" />
	
		<div class="daohang">
			<ul style="margin-left: 50px">
				<a href="sellindex"><li style="font-size: 15px; color: black;font-weight: inherit;">耶首页</li></a>
				<a href="sellitemnavigation?cid=1"><li style="font-size: 15px; color: black;font-weight: inherit;">手机</li></a>
				<a href="sellitemnavigation?cid=2"><li style="font-size: 15px; color: black;font-weight: inherit;">台式电脑</li></a>
				<a href="sellitemnavigation?cid=3"><li style="font-size: 15px; color: black;font-weight: inherit;">笔记本</li></a>
				<a href="sellitemnavigation?cid=4"><li style="font-size: 15px; color: black;font-weight: inherit;">平板电脑</li></a>
				<a href="sellitemnavigation?cid=5"><li style="font-size: 15px; color: black;font-weight: inherit;">电脑配件</li></a>
			</ul>
		</div>
	</div>

<style type="text/css">
	.activec1 {
		color: #2e5ce4;
	}
	
	.activec2 {
		color: black;
	}
	
	.owl-carousel .owl-stage-outer {
		margin-left: 0px;
	}
	
	.owl-prev{
		background: #fff !important;
		top: 10px;
		left: -50px;
	}
	
	.owl-next{
		background: #fff !important;
		top: 10px;
    	right: -50px;
	}
	
	.sousuo h1{
	margin-top:20px;
	font-size: 32px;
	}
</style>

	</section>


	<section class="rows" style="height: 550px">
	<div class="row" style="height: 550px">
		<div class="row1" style="height: 400px">
			<div class="row1_1">
				<c:forEach items="${map.imgf }" var="img" begin="0" end="0">
					<img class="row1_img" src="${img.filePath }" alt="">
				</c:forEach>
			</div>
			<div class="row1_2">
				<div class="large-12 columns">
					<div class="owl-carousel owl-theme">
						<c:forEach items="${map.imgf }" var="img" varStatus="v">
							<div class="item ${v.count }">
								<img src="${img.filePath }" alt="">
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>

		<div class="row2" style="height: 400px">
			<c:forEach items="${map.item }" var="item">
				<p class="rowtxt" style="font-size: 23px" id="title">${item.title }</p>
				<input type="hidden" value="${item.i_id }" id="i_id" />
			</c:forEach>
			<p class="rowtxt1">
				<span>型号：</span> <span class="jiage">${map.model.model }</span>
			</p>
			<p class="rowtxt1">
				<span>价格：</span> <span class="jiage" id="price"></span>
			</p>
			<p class="rowtxt1">
				<span>库存：</span> <span class="jiage" id="stocknum"></span>
			</p>

			<div class="peizhi" style="margin-top: 30px">
				<p>配置</p>
				<input type="hidden" value="" id="cfid" />
				<ul>
					<c:forEach items="${map.conf }" var="conf" varStatus="v">
						<div>
							<li class="but1" onclick="colormemory(${v.count })" style="font-weight: 600;">${conf.colormemory }</li>
							<input type="hidden" value="${conf.cfid }" id="cfid${v.count }" />
							<input type="hidden" value="${conf.price }" id="price${v.count }" />
							<input type="hidden" value="${conf.stocknum }"
								id="stocknum${v.count }" class="stocknum"/>
						</div>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="but">
			<div class="shichang">
				<span>数量</span> <input id="count" class="join-money" type="text"
					value="1" disabled="disabled"> <input class="addBtn min"
					type="button" value="-" /> <input class="addBtn add" type="button"
					value="+" />
				<span id="totalprice" style="margin-left: 180px;font-size: 24px;color: #ff6f00"></span>
			</div>			
			<div style="margin-left: 26px">
				<c:forEach items="${map.item }" var="item">
					<c:if test="${item.status==1 }">
						<a id="buy" href="" onclick="return buy()">
						<button class="goumai">立即购买</button></a>
						<button id="shoppingtrolley" class="gouwu" onclick="shoppingtrolley()">加入购物车</button>
					</c:if>
					<c:if test="${item.status==2 }">						
						<button class="gouwu" style="background-color: #b5b3b3;cursor: default;">该商品已下架</button>
					</c:if>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="xiangqing" style="margin-top: 80px">
		<ul>
			<li class="xiangqing_li1">详情</li>
			<li class="pingjia xiangqing_li2" onclick="pj()">评价 </li>
		</ul>
		<div class="xiangqing_li1_1">
			<div class="imges">
				<c:forEach items="${map.imgfparticulars }" var="imgfparticulars">
					<img src="${imgfparticulars.filePath }" alt="">
				</c:forEach>
			</div>
			<!-- 底部 -->
			<jsp:include page="bottom.jsp" />
		</div>
		<div class="xiangqing_li1_2" id="pingluen" style="display: none;padding-bottom: 0px">
			<div class="pingjia" v-for="list in lists">
				<!-- 评价和时间 -->
				<div class="li1">
					<p class="p1">{{list.pingluen}}</p>
					<div>
						型号：<span>{{list.colormemory}}</span>
					</div>
					
				</div>
				<!-- 型号 -->
				<div class="li2">
					<p class="p2">{{list.date }}</p>
				</div>
				<!-- 用户和名称 -->
				<div class="li3">{{list.phone}}</div>
			</div>
					
			
			<div class="qwer">
	            <a href="javascript:return false"
					style="font-weight: bold; cursor: default; background-color: #ccff66;margin-left: 350px">共{{page.pages}}页</a>
	            <a href="javascript:return false;"
					style="font-weight: bold; cursor: default; background-color: #ccff66">第{{page.pageNum }}页</a>
				<input type="hidden" >
				<a href="javascript:return false;"
					style="font-weight: bold;background-color: #fcdb00;" v-on:click="shang()">上一页</a>
				<a href="javascript:return false;"
					style="font-weight: bold;background-color: #fcdb00;" v-on:click="xia()">下一页</a>
            </div>
			
			<p style="margin-bottom: 50px;"></p>
			<!-- 底部 -->
			<jsp:include page="bottom.jsp" />
		</div>
	</div>

	</section>
	
	<script type="text/javascript">
	$(this).ready(function(){
		//刷新colormemory为空
		$("#cfid").val("");	
	});
	
	
	//改变配置效果
	function colormemory(count){
		$("#count").val(1);
		
		//改变cfid
		var cfid="cfid"+count;
		var cfidcount=$("#"+cfid).attr("value");
		$("#cfid").val(cfidcount);
		
		//改变price
		var price="price"+count;
		var pricecount="￥"+$("#"+price).attr("value");
		$("#price").html(pricecount);
		$("#totalprice").html(pricecount);
		
		//改变stocknum
		var stocknum="stocknum"+count;
		var stocknumcount=$("#"+stocknum).attr("value");
		$("#stocknum").html(stocknumcount);
	}

	//购买
	function buy(){
		var cfid=$("#cfid").val();
		if(cfid==null||cfid==""){
			layer.msg("请选择商品!", {
				icon : 2,
				time : 2000
			});
			return false;
		}else{
			var phone=${user.phone}+"";
			if(phone!=""&&phone!=null){
				var i_id=$("#i_id").val();
				var cfid=$("#cfid").val();
				var title=$("#title").html();
				var mun=$("#count").val();
				var filePath=$(".row1_img").attr("src");
				$("#buy").attr("href","sellitemorder?i_id="+i_id+"&cfid="+cfid+"&title="+title+"&mun="+mun+"&filePath="+filePath);
				return true;
			}else{
				layer.confirm("您未登录，请先登录！",{ btn: ["登录","取消"] },function(index){
					layer.close(index);
				 	window.location.href = "user" ;
				 });
				return false;
			}	
		}		
	}
	
	
	//加入购物车
	function shoppingtrolley(){
		var cfid=$("#cfid").val();
		if(cfid==null||cfid==""){
			layer.msg("请选择商品!", {
				icon : 2,
				time : 2000
			});
		}else{
           	var i_id=$("#i_id").val();
   			var cfid=$("#cfid").val();
   			var mun=$("#count").val();
   			var filePath=$(".row1_img").attr("src");
   			$.post("shoppingtrolley",{"i_id":i_id,"cfid":cfid,"mun":mun}, function(data) {				
   				if(data){
   					var shopcarcount=$("#shopcarcount").find("span").html();
   					$("#shopcarcount").find("span").html(Number(shopcarcount)+1);
   					layer.msg("添加成功!", {
   	       				icon : 1,
   	       				time : 2000
   	       				});
   				}else{
   					layer.confirm("您未登录，请先登录！",{ btn: ["登录","取消"] },function(index){
						layer.close(index);
					 	window.location.href = "user" ;
					 });
   				}	
   			});
	            
		}		
	}
	
	/* 搜索机型 */ 
	function search(){
		var title=$("#search").val().trim();
		if(title.length==0){
			return false;
		}
		$("#asearch").attr("href","sellitemnavigation?title="+title);
		return true; 
	}

	
	function pj(){
		var id = $("#i_id").val();
		$.ajaxSettings.async = false;
		$.post("plitem",{i_id:id},function(data){
			var a = new Vue({
				el:"#pingluen",
				data:{
					page : data,
					lists : data.list
				},
				methods:{
					shang(){
						var num = a.page.pageNum ;
						if(num != 1 ){
							var pageNum = a.page.prePage;
							$.post("plitem",{i_id:id,pageNum:pageNum},function(data){
								a.page = data ;
								a.lists = data.list ;
							},"json")
						}
					},
					xia(){
						var num = a.page.pageNum ;
						var znum = a.page.pages ;
						if(num != znum){
							var pageNum = this.page.nextPage;
							$.post("plitem",{i_id:id,pageNum:pageNum},function(data){
								a.page = data ;
								a.lists = data.list;
							},"json")
						}
					}
				},
				
			})
		},"json")
		
		/* $.ajaxSettings.async = true; */
	}
		
</script>
</body>
</html>